<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="isDetail">
    <el-descriptions title="合作信息"></el-descriptions>
    <div class="form">
      <el-form-item label="合作方式" prop="cooperationType" key="cooperationType">
        <el-select
          v-model="form.cooperationType"
          placeholder="请选择"
          @change="checkedCooperationType"
          :disabled="!!roomId"
        >
          <el-option
            v-for="dict in dict.type.cooperation_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="收费方式" prop="chargeType" v-if="form.cooperationType === '2'" key="chargeType">
        <el-select
          v-model="form.chargeType"
          placeholder="请选择"
        >
          <el-option
            v-for="dict in dict.type.charge_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <div v-if="form.cooperationType === '2'">
        <el-form-item label="账单服务费" prop="serviceCharge" v-if="form.chargeType === '1'" label-width="130px" key="serviceCharge">
          <el-input
            v-model="form.serviceCharge"
            placeholder=""
            v-input.float="1"
            @change="(e)=>form.serviceCharge = Number(e)"
          >
            <span slot="append">%</span>
          </el-input>
        </el-form-item>
        <el-form-item label="费用金额" prop="feeAmount" v-if="form.chargeType === '2'" key="feeAmount">
          <el-input
            v-model="form.feeAmount"
            placeholder=""
            v-input.float="2"
            @change="(e)=>form.feeAmount = Number(e)"
          >
            <span slot="append">元</span>
          </el-input>
        </el-form-item>
      </div>
      <div v-if="form.cooperationType === '2'">
        <el-form-item label="最晚付款日期" prop="latestPaymentDate" v-if="form.chargeType === '2'" key="latestPaymentDate">
          <el-date-picker
            v-model="form.latestPaymentDate"
            type="date"
            placeholder="请选择"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :picker-options="lastPaymentDateOptions"
          ></el-date-picker>
        </el-form-item>
      </div>
    </div>
    <el-descriptions title="房源归属"></el-descriptions>
    <div class="form">
      <el-form-item label="房管家" prop="houseManagerId" key="houseManagerId">
        <el-select
          v-model="form.houseManagerId"
          placeholder="请选择"
          clearable
          @change="handleHouseManagerIdChange"
        >
          <el-option
            v-for="dict in houseManagerList"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="业主" prop="proprietorUserId" key="proprietorUserId">
        <el-select
          v-model="form.proprietorUserId"
          placeholder="请选择"
          clearable
          :disabled="!!roomId"
          @change="handleProprietorUserIdChange"
        >
          <el-option
            v-for="dict in proprietorList"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
    </div>
  </el-form>
</template>
<script>
import { houseManagerList, listProprietor } from '@/api/house/room'
import { compareDate } from '@/utils/common/moment'
import rules from '@/views/house/room/component/rules/room-add'

export default {
  name: 'cooperation-info',
  dicts: [
    'cooperation_type',
    'charge_type'
  ],
  props: {
    isDetail: {
      type: Boolean,
      default: false
    },
    roomId: {
      type: String,
      default: ''
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // 房管家列表
      houseManagerList: [],
      //业主列表
      proprietorList: [],
      form: {
        cooperationType: '',//合作方式
        chargeType: '', //收费方式
        serviceCharge: '',
        feeAmount: '',
        latestPaymentDate: '',
        houseManagerId: '',
        proprietorUserId: ''
      },
      // 业主列表参数
      proprietorParams: {
        proprietorName: '',//业主名称
        proprietorMobile: '',//业主手机号码
        houseCommissionStatus: '2',//房屋委托:1.待开通;2.已完成(字典字段:house_commission_status)
        proxyServiceStatus: ''//代理服务:1.待开通;2.未完成;3.已完成(字典字段:proxy_service_status)
      },
      rules: rules.apply(this),
      // 最晚付款日期选项
      lastPaymentDateOptions: {
        disabledDate(time) {
          //可选今天之后的日期
          return compareDate(time, new Date(), '<=')
        }
      }
    }
  },
  methods: {
    // 初始化表单数据
    init(){
      this.getHouseManagerList()
      this.getProprietorList()
      this.resetForm()
      if(this.data){
        this.$nextTick(() => {
          this.form = {
           ...this.data
          }
        })
      }
    },
    // 重置表单
    resetForm() {
      this.$refs.form.resetFields()
      this.form = {
        cooperationType: '1',
        chargeType: '1',
        serviceCharge: '',
        feeAmount: '',
        latestPaymentDate: '',
        houseManagerId: '',
        houseManagerName: '',
        houseManagerPhone: '',
        proprietorUserId: '',
        proprietorName: '',
      }
    },
    //获取房管家列表
    getHouseManagerList() {
      let params = {
        roleKey: 'houseKeeper'
      }
      houseManagerList(params).then(response => {
        this.houseManagerList = response.data.map(item => {
          return {
            label: item.userName,
            value: item.userId,
            phone: item.phonenumber
          }
        })
      })
    },
    //房管家选择
    handleHouseManagerIdChange(e) {
      console.log('handleHouseManagerIdChange',e)
      let houseManager = this.houseManagerList.find(item => item.value === e)
      this.form.houseManagerName = houseManager.label
      this.form.houseManagerPhone = houseManager.phone
    },
    //获取业主列表
    getProprietorList() {
      listProprietor(this.proprietorParams).then(response => {
        this.proprietorList = response.rows.map(item => {
          return {
            label: item.proprietorName,
            value: item.conUserId
          }
        })
      })
    },
    //业主选择
    handleProprietorUserIdChange(e) {
      console.log('handleProprietorUserIdChange',e)
      let proprietor = this.proprietorList.find(item => item.value === e)
      this.form.proprietorName = proprietor.label
    },
    //合作方式改变
    checkedCooperationType(e) {
      this.form.proprietorId = null
      this.form.proprietorUserId = null
      if (!e) return
      //房屋委托
      if (e == 1) {
        this.proprietorParams.houseCommissionStatus = '2'
        this.proprietorParams.proxyServiceStatus = ''
      }
      // 代理服务
      if (e == 2) {
        this.proprietorParams.houseCommissionStatus = ''
        this.proprietorParams.proxyServiceStatus = '3'
      }
      // 获取业主列表
      this.getProprietorList()
    },
    // 提交表单
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (!valid) return
        let formData = JSON.parse(JSON.stringify(this.form))
        this.$emit('submit', formData)
        this.resetForm()
      })
    }
  }
}
</script>


<style scoped lang="scss">
.form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
</style>
